<template>
	<body-wrap>
		<view class="userInfoBox">
			<view class="mList">
				<view class="mLi">
					<view class="label">头像</view>
					<view class="touxiang" @click="updateImg">
						<image class="img" :src="userInfo.headerImg" mode="aspectFill"></image>
						<!-- <button class="upbtn" type="default" open-type="chooseAvatar" @chooseavatar="getAvatar"></button> -->
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi" @click="inputDialogToggle('name')">
					<view class="label">用户名</view>
					<view class="txtVal">
						{{userInfo.name}}
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi">
					<view class="label">性别</view>
					<view class="txtVal sltxtVal">
						<hpy-form-select class="mypicker" :dataList="hobbyList" text="text" name="id" v-model="userInfo.sex" hideBorder hideArrow @change="change('sex')"/>
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi" @click="inputDialogToggle('phone')">
					<view class="label">联系电话</view>
					<view class="txtVal">{{userInfo.phone}}</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi" @click="inputDialogToggle('address')">
					<view class="label">居住地址</view>
					<view class="txtVal">{{userInfo.address}}</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi cjbox">
					<view class="label">生日</view>
					<view class="txtVal">
						<uni-datetime-picker class="mydpdate" type="date" :clear-icon="false" v-model="userInfo.birthday" @change="setDate"/>
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi">
					<view class="label">病史</view>
					<view class="txtVal sltxtVal">
						<hpy-form-select class="mypicker" :dataList="hobbyList2" text="text" name="id" v-model="userInfo.medicalHistory" hideBorder hideArrow @change="change('medicalHistory')"/>
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mLi">
					<view class="label">是否原愿意加入互助养老志愿者</view>
					<view class="txtVal sltxtVal">
						<hpy-form-select class="mypicker" :dataList="hobbyList3" text="text" name="id" v-model="userInfo.volunteerFlag" hideBorder hideArrow @change="change('volunteerFlag')"/>
					</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view>
				<!-- <view class="mLi">
					<view class="label">协议与说明</view>
					<view class="txtVal"></view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</view> -->
			</view>
		</view>
	</body-wrap>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" :value="userInfo[curProp]" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {saveMemberInfo,uploadImage} from "@/api/index.js"
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				userInfo:computed(()=>store.state.base.userInfo), 
				hobbyList:[
					{id:1,text:'男'},
					{id:2,text:'女'},
					{id:3,text:'未知'}
				],
				hobbyList2:[
					{id:'有',text:'有'},
					{id:'无',text:'无'}
				],
				hobbyList3:[
					{id:1,text:'是'},
					{id:2,text:'否'}
				],
				formData:{},
				curProp:''
			})
			
			onMounted(()=>{
				
			})
			
			const inputDialogToggle =(propName)=> {
				state.curProp = propName
				proxy.$refs.inputDialog.open()
			}
			
			const dialogInputConfirm = async (val)=>{
				let params={}
				params[state.curProp]=val
				updateInfo(params)
			}
			
			const updateInfo = async (params)=>{
				const res = await saveMemberInfo(params)
				state.curProp && (state.userInfo[state.curProp] = params[state.curProp]) // 修改store
			}
			
			const change = (propName)=>{
				state.curProp = propName
				let params={}
				params[state.curProp] = state.userInfo[state.curProp]
				updateInfo(params)
			}
			
			const getAvatar = (e)=>{
				state.userInfo.headerImg = e.detail.avatarUrl
			}
			
			const updateImg = async ()=>{
				const res = await uploadImage()
				if(res.code == 0){
					state.curProp = ''
					state.userInfo.headerImg = res.data.url
					updateInfo({headerImg:res.data.url})
				}else{
					toast('上传失败')
				}
			}
			
			const setDate = async ()=>{
				console.log("birthday:",state.userInfo.birthday)
				updateInfo({birthday:state.userInfo.birthday})
			}
			
			return {
				...toRefs(state),
				dialogInputConfirm,
				inputDialogToggle,
				change,
				getAvatar,
				updateImg,
				setDate
			}
		}
	})
</script>

<style lang="scss">
	.userInfoBox{
		box-sizing:border-box;
		margin: 30rpx;
		background: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 20rpx 0 ;
		.mList{
			.mLi{
				display: flex;
				height: 90rpx;
				line-height: 90rpx;
				background: #fff;
				font-size: 32rpx;
				padding: 0 20rpx 0 30rpx;
				margin: 0;
				&.cjbox{
					.label{
						flex: none;
					}
					.txtVal{
						flex: 1;
						.uni-date-editor{
							display: block;
							width: 100%;
							height: 100%;
							.icon-calendar{
								display: none;
							}
							.uni-date__x-input{
								text-align: right;
								font-size: 32rpx;
								line-height: 80rpx;
							}
							.uni-date-x--border {
								border: 0;
							}
						}
					}
				}
				.label{
					flex: 1;
					color: #7a7a7a;
				}
				.txtVal{
					position: relative;
					z-index: 1;
					.upnick{
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 10;
						left: 0;
						top: 0;
						opacity: 0;
					}
					&.sltxtVal{
						padding-top: 5rpx;
						margin-right: -8rpx;
					}
					.mydatesl{
						width: 100%;
					}
				}
				.touxiang{
					position: relative;
					z-index: 10;
					width: 60rpx;
					height: 60rpx;
					background: #7a7a7a;
					border-radius: 50%;
					overflow: hidden;
					margin: 15rpx 0 0 0;
					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
					.upbtn{
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 10;
						left: 0;
						top: 0;
						opacity: 0;
					}
				}
				.imgbox{
					width: 50rpx;
					height: 50rpx;
					transform: rotate(-90deg);
					-webkit-transform: rotate(-90deg);
					margin: 20rpx 0 0 0;
					.icon{
						display: block;
						width:100%;
						height: 100%;
						opacity: 0.5;
					}
				}
			}
		}
	}
</style>
